<route>
  {
    style: {
      navigationBarTitleText: '模拟面试',
    }
  }
</route>

<script setup lang="ts">
import { getInterviewReportListAPI } from '@/api/interview'
import { PageParams } from '@/types/global'
import { InterviewReportItem } from '@/types/interview'
import { generateRandomId } from '@/utils'
import { useToast } from 'wot-design-uni'
const toast = useToast()

const activeIndex = ref(0)
const subTypes = ref([
  {
    id: 1,
    title: 'AI模拟面试',
  },
  {
    id: 2,
    title: '面试报告',
  },
])
// 文件信息状态
const pdfInfo = ref({
  name: '',
  size: 0,
  totalPages: 0,
  uploadTime: '',
  coverImageUrl: '', // pdf封面图片URL
  pdfUrl: '', // pdf文件URL
})

// 面试会话ID
const chatId = ref('')

// 临时pdf文件路径
const tempPdfPath = ref('')

// 处理上传
const handleUpload = () => {
  // 调用上传API
  wx.chooseMessageFile({
    count: 1,
    type: 'file',
    success: (res) => {
      const file = res.tempFiles[0]
      tempPdfPath.value = file.path
      // 检查文件大小（转换为MB）
      const sizeMB = file.size / (1024 * 1024)
      if (sizeMB > 10) {
        uni.showToast({
          title: '文件大小不能超过10MB',
          icon: 'none',
        })
        return
      }
      chatId.value = generateRandomId('interview')
      uni.uploadFile({
        url: import.meta.env.VITE_SERVER_BASEURL + '/member/interview/upload/' + chatId.value,
        filePath: file.path,
        name: 'file',
        success: (response) => {
          toast.success('简历上传成功')
          pdfInfo.value = {
            name: file.name,
            size: Number(sizeMB.toFixed(1)),
            totalPages: JSON.parse(response.data)?.pages, // 这里需要实际解析PDF获取页数
            uploadTime: new Date().toLocaleString(),
            coverImageUrl: JSON.parse(response.data)?.coverImageUrl,
            pdfUrl: JSON.parse(response.data)?.url,
          }
        },
      })
    },
  })
}

// 确认上传
const handleConfirm = () => {
  if (chatId.value === '') {
    toast.error('请先上传简历')
    return
  }
  uni.navigateTo({
    url:
      '/pages/interviewChat/interviewChat?chatId=' + chatId.value + '&position=' + position.value,
  })
  // uni.navigateTo({
  //   url: '/pages/interviewChat/interviewChat?chatId=' + 'interview1752245751267393' + '&position=' + 'java',
  // })
}

// 重新选择
const handleReset = () => {
  pdfInfo.value = {
    name: '',
    size: 0,
    totalPages: 0,
    uploadTime: '',
    coverImageUrl: '',
    pdfUrl: '',
  }
  handleUpload()
}

// 翻页控制
const currentPage = ref(1)
const prevPage = () => {
  if (currentPage.value > 1) currentPage.value--
}
const nextPage = () => {
  if (currentPage.value < pdfInfo.value.totalPages) currentPage.value++
}

const handlePreview = () => {
  // 打开PDF预览页面
  wx.openDocument({
    filePath: tempPdfPath.value,
    fileType: 'pdf',
  })
}

// 所选职位
const position = ref('')

const columns = ref([
  'Java',
  'Python',
  'C++',
  '机器学习',
  '算法工程师',
  '数据开发',
  '数据分析师',
  '后端开发',
  '测试',
  '运维/技术支持',
  '技术项目经理',
  '前端/移动端开发',
  '网络/系统安全',
  '销售技术支持',
  '数据标注/AI训练师',
])

// 分页参数
const pageParams = ref<PageParams>({
  pageNum: 1,
  pageSize: 10,
})

// 面试报告列表
const interviewReportList = ref<InterviewReportItem[]>([])
// 当前页数
const currentPageNum = ref(1)
// 总页数
const totalPages = ref(1)
// 获取面试报告
const getInterviewReportList = async () => {
  const res = await getInterviewReportListAPI(pageParams.value)
  const { current, pages, records } = res.data
  interviewReportList.value = records
  currentPageNum.value = current
  totalPages.value = pages
}
onLoad(async () => {
  getInterviewReportList()
})

// 滚动触底
const onScrolltolower = async () => {
  // 页码到底停止加载更多
  if (currentPageNum.value >= totalPages.value) {
    console.log(currentPageNum.value)
    console.log(totalPages.value)

    toast.info('没有更多数据了~')
    return
  }
  // 当前页码累加
  pageParams.value.pageNum++
  // 触底加载更多
  const res = await getInterviewReportListAPI(pageParams.value)
  const { current, pages, records } = res.data
  interviewReportList.value.push(...records)
  currentPageNum.value = current
  totalPages.value = pages
}
</script>

<template>
  <view class="viewport">
    <!-- 模拟面试主页封面图 -->
    <view class="cover">
      <image src="../../static/images/interview-bcg.png"></image>
    </view>
    <!-- tab栏选项 -->
    <view class="tabs">
      <text
        v-for="(item, index) in subTypes"
        :key="item.id"
        class="text"
        :class="{ active: index === activeIndex }"
        @tap="activeIndex = index"
      >
        {{ item.title }}
      </text>
    </view>
    <scroll-view scroll-y class="scroll-view" v-show="activeIndex === 0">
      <view style="padding: 30rpx">
        <view>
          <text class="interview-first">第一步 选择面试职位</text>
        </view>
        <wd-picker :columns="columns" title="请选择职位类型" v-model="position" use-default-slot>
          <view class="tech-tag">
            <text class="tag-text" v-if="position">{{ position }}</text>
            <text class="tag-text" v-else style="color: #a8abb2">请选择你的职位</text>
            <view class="selected-indicator">
              <view class="indicator-outer"></view>
              <view class="indicator-inner"></view>
            </view>
          </view>
        </wd-picker>
      </view>
      <view class="upload-container">
        <view style="margin-bottom: 20rpx">
          <text class="interview-second">第二步 提交个人简历</text>
        </view>
        <!-- PDF预览区域 -->
        <view class="preview-area" v-if="pdfInfo.name">
          <view class="preview-title">简历预览</view>
          <view class="preview-content">
            <view class="page-info">
              <wd-icon
                name="file-image"
                size="22px"
                custom-class="pdf-icon"
                custom-style="color: #3B65FE"
              ></wd-icon>
              <text style="margin-left: 10rpx">第 1 页，共 {{ pdfInfo.totalPages }} 页</text>
              <view class="page-nav">
                <text class="nav-btn" @tap="prevPage">＜</text>
                <text class="nav-btn" @tap="nextPage">＞</text>
              </view>
            </view>
            <view class="pdf-preview-wrapper">
              <image :src="pdfInfo.coverImageUrl" mode="aspectFit"></image>
              <view class="preview-mask" @tap="handlePreview">
                <wd-icon
                  name="view"
                  :size="36"
                  custom-class="preview-icon"
                  custom-style="color: white"
                ></wd-icon>
                <text class="preview-text">点击预览</text>
              </view>
            </view>
          </view>
          <view class="file-info">
            <view class="info-row">
              <text class="label">文件名称</text>
              <text class="value">{{ pdfInfo.name }}</text>
            </view>
            <view class="info-row">
              <text class="label">文件大小</text>
              <text class="value">{{ pdfInfo.size }} MB</text>
            </view>
            <view class="info-row">
              <text class="label">上传时间</text>
              <text class="value">{{ pdfInfo.uploadTime }}</text>
            </view>
          </view>
        </view>
        <!-- PDF上传区域 -->
        <view class="upload-area" @tap="handleUpload" v-else>
          <view class="upload-icon">
            <wd-icon name="cloud-upload" :size="40" custom-style="color: #3B65FE"></wd-icon>
          </view>
          <text class="upload-text">点击上传PDF简历</text>
          <text class="upload-desc">支持PDF格式，大小不超过10MB</text>
        </view>
        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="confirm-btn" type="primary" @tap="handleConfirm">确认上传</button>
          <button class="reset-btn" @tap="handleReset">重新选择</button>
        </view>
      </view>
    </scroll-view>
    <scroll-view
      scroll-y
      class="scroll-view"
      v-show="activeIndex === 1"
      @scrolltolower="onScrolltolower"
    >
      <view style="padding: 30rpx">
        <navigator class="interviewer-card" v-for="item in interviewReportList" :key="item.id" :url="`/pages/interviewReport/interviewReport?id=${item.id}`">
          <view class="interviewer-info">
            <view>
              <view class="position">{{ item.position }}</view>
              <view class="interview-time">{{ item.createTime }}</view>
              <view class="interview-person">面试官：Sarah - 资深面试官</view>
            </view>
            <view class="status">{{ item.score }}分</view>
          </view>
          <view class="interview-person">综合评价：{{ item.evaluate }}</view>
        </navigator>
      </view>
      <view class="loading-text">
        {{ currentPageNum === totalPages ? '没有更多数据了~' : '正在加载...' }}
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 180rpx 0 0;
  position: relative;
  overflow: auto;
}
.cover {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.scroll-view {
  flex: 1;
  // background-color: #F5F5F6;
}
.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
  .text {
    margin: 0 20rpx;
    position: relative;
  }
  .active {
    &::after {
      content: '';
      width: 40rpx;
      height: 4rpx;
      transform: translate(-50%);
      background-color: #4d80f0;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}
.tech-tag {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #ffffff;
  border-radius: 8px;
  // margin: 8px;
  margin-top: 20rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 2rpx dashed #ddd;

  .tag-text {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  .selected-indicator {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;

    .indicator-outer {
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: rgba(59, 101, 254, 0.2);
    }

    .indicator-inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #4080ff;
    }
  }
}
.upload-container {
  padding: 30rpx;

  .upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300rpx;
    background-color: #fff;
    border: 2rpx dashed #ddd;
    border-radius: 20rpx;
    margin-bottom: 30rpx;

    .upload-icon {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .upload-text {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 10rpx;
    }

    .upload-desc {
      font-size: 24rpx;
      color: #999;
    }
  }

  .preview-area {
    background-color: #fff;
    border-radius: 24rpx;
    margin: 30rpx;
    overflow: hidden;

    .preview-title {
      font-size: 32rpx;
      color: #333;
      padding: 30rpx;
      border-bottom: 2rpx solid #f5f5f5;
    }

    .preview-content {
      padding: 30rpx;

      .page-info {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .pdf-icon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }

        text {
          font-size: 28rpx;
          color: #666;
        }

        .page-nav {
          margin-left: auto;

          .nav-btn {
            padding: 10rpx 20rpx;
            color: #4080ff;
          }
        }
      }

      .pdf-preview-wrapper {
        position: relative;
        width: 100%;
        height: 800rpx;

        image {
          width: 100%;
          height: 100%;
        }

        .preview-mask {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .preview-icon {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 20rpx;
          }

          .preview-text {
            font-size: 28rpx;
            color: #ffffff;
          }
        }
      }
    }

    .file-info {
      padding: 30rpx;
      background-color: #f8f8f8;

      .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          width: 140rpx;
          font-size: 28rpx;
          color: #999;
        }

        .value {
          flex: 1;
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }

  .action-buttons {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;

    button {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      border-radius: 40rpx;
    }

    .confirm-btn {
      background-color: #4080ff;
    }

    .reset-btn {
      background-color: #fff;
      color: #666;
      border: 2rpx solid #ddd;
    }
  }
}
.interviewer-card {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;

  .interviewer-info {
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 12rpx;
    }

    .position {
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 16rpx;
    }

    .interview-time {
      font-size: 24rpx;
      color: #999999;
      margin-bottom: 8rpx;
    }
    .status {
      font-size: 45rpx;
      color: #ff6b6b;
      // background: rgba(255, 107, 107, 0.1);
      padding: 4rpx 12rpx;
      border-radius: 8rpx;
    }
  }

  .interview-person {
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 8rpx;
    display: -webkit-box; /* 使用旧版弹性盒子模型 */
    -webkit-box-orient: vertical; /* 内容垂直排列 */
    -webkit-line-clamp: 2; /* 最多显示 2 行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 可选：最后一行超出时显示 ... */
    line-height: 1.5; /* 行高（可选，用于精确控制高度） */
    max-height: calc(1.5em * 2);
  }
}

.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
}
</style>
